<!--编辑合同-->
<section class="plr-24 newCt-1" id="contract-edit1">
  <!-- 基础信息 -->
  <section>
    <div class="clearfix line-height-56 border-b">
      <p class="line-height-56 pull-left">合同管理 - 编辑合同 - 基础信息</p>
    </div>
    <div class="number">
      <span class="pr-24">管理编号：</span>
      <span>{{zlfData.m_code}}</span>
    </div>
    <div class="mb-10">
      <span class="pr-24">合同编号：</span>
      <input type="text" class="form-control ct-number-ipt" v-model="zlfData.c_code">
    </div>
    <div class="mb-10">
      <span class="pr-24">合同名称：</span>
      <input type="text" class="form-control ct-number-ipt" v-model="zlfData.name">
    </div>
    <div class="mb-10 contract-memo clearfix">
      <div class="memo-name">备注：</div>
      <textarea class="form-control contract-memo-textarea" name="name" rows="6" cols="80" v-model="zlfData.memo"></textarea>
    </div>
    <div class="sperate-line"></div>
  </section>
  <!-- 乙方信息 -->
  <section class="rent-container">
    <form id="renter-mes-form">
      <h3 class="title">乙方</h3>
      <div class="row mb-10">
        <div class="col-xs-1 pr-0" style="width:120px;"><span class="required">*</span>租赁方：</div>
        <div class="col-xs-10 js-rent-method">
          <span :class="{'hl-radio':true, 'mr-10': true, active:zlfType.active == item.type}" v-for="item in zlfType.list" @click="selectZlfType(item.type)">{{item.name}}</span>
        </div>
      </div>
      <div class="row mb-10">
        <div class="col-xs-1 pr-0 js-cy-name" style="width:120px;"><span class="required">*</span>客户名称：</div>
        <div class="col-xs-3 relative">
          <input
            type="text"
            class="form-control"
            autocomplete="off"
            v-model="zlfData.zlf_name"
            @input="getRelevanceCustomer"
            @blur="zlfname"
          >
          <ul class="append-temp absolute bg-fff border z-998 line-height-34" style="left:15px; top:35px; max-height:200px; overflow-y:scroll; width: 88%; text-indent:0.8em;" v-if="customersFlag">
            <li v-for="item in customers" @click="selectedCustomerName(item.name)">{{item.name}}</li>
          </ul>
        </div>
        <div class="col-xs-1 pr-0 text-right" style="width:120px;"><span class="required">*</span>所属行业：</div>
        <div class="col-xs-3 pr-0">
          <div class="select-ul" id="industry-st">
            <span class="select-name br-4 box-i-shadow">{{zlfTypess}}</span>
            <ul>
              <li
                v-for="item in industryTypes.list"
                @click="setIndustryType(item.dictCode, item.dictName)"
              >{{item.dictName}}</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 公司租赁  -->
      <div class="row mb-10" v-if="zlfType.active === 'C'">
        <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span class="required">*</span>纳税人识别号：</div>
        <div class="col-xs-3">
          <input type="text" class="form-control" autocomplete="off" v-model="zlfData.idcode" @blur="validateIDcode('C')">
        </div>
        <div class="col-xs-1 pr-0 text-right line-height-34" style="width:120px;">公司邮箱：</div>
        <div class="col-xs-3 pr-0">
          <input type="text" class="form-control" autocomplete="off" v-model="zlfData.email" @blur="validateEmail()">
        </div>
      </div>

      <!-- 个人租赁  -->
     <div class="row mb-10" v-if="zlfType.active === 'P'">
       <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span class="required">*</span>身份证号：</div>
       <div class="col-xs-3">
         <input type="text" class="form-control" autocomplete="off" v-model="zlfData.idcode" @blur="validateIDcode('P')">
       </div>
       <div class="col-xs-1 pr-0 text-right line-height-34" style="width:120px;">个人邮箱：</div>
       <div class="col-xs-3 pr-0">
         <input type="text" class="form-control" autocomplete="off" v-model="zlfData.email" @blur="validateEmail()">
       </div>
     </div>

      <div class="row mb-10">
        <div class="col-xs-1 pr-0" style="width:120px;"><span style="padding-left:5px;"></span>法人：</div>
        <div class="col-xs-3">
          <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_lperson">
        </div>
        <div class="col-xs-1 pr-0 text-right" style="width:120px;">联系电话：</div>
        <div class="col-xs-3 pr-0">
          <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_lphone">
        </div>
      </div>

      <div class="row mb-10">
        <div class="col-xs-1 pr-0" style="width:120px;"><span class="required">*</span>联系人：</div>
        <div class="col-xs-3">
          <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_sperson" @blur="zlfperson">
        </div>
        <div class="col-xs-1 pr-0 text-right" style="width:120px;"><span class="required">*</span>联系电话：</div>
        <div class="col-xs-3 pr-0">
          <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_sphone">
        </div>
      </div>

      <div class="row mb-10">
        <div class="col-xs-1 pr-0 line-height-34" style="width:120px;"><span class="required">*</span>渠道分类：</div>
        <div class="col-xs-3 ">
          <div class="select-ul" id="channelType-st">
            <span class="select-name br-4 box-i-shadow" ref="channelType">{{channelType.selected.name ? channelType.selected.name : '请选择'}}</span>
            <ul>
              <li
                v-for="item in channelType.list"
                @click="selectChannelType(item.dictCode, item.dictName)"
              >{{item.dictName}}</li>
            </ul>
          </div>
        </div>
        <div class="col-xs-1 pr-0 text-right line-height-34" style="width:120px;"><span style="color:#fff;">*</span>渠道名称：</div>
        <div class="col-xs-3 pr-0">
          <web-channel :code="channelType.selected.code" :value="channelName.selected.name" @on-change="selectChannelName"></web-channel>
        </div>
      </div>

      <div class="row mb-20">
        <div class="col-xs-1 pr-0" style="width:120px;"><span class="required">*</span>通讯地址：</div>
        <div class="col-xs-7 pr-0 contract-address">
          <input type="text" class="form-control" autocomplete="off" v-model="zlfData.zlf_address" @blur="zlfaddress">
        </div>
      </div>

      <div class="sperate-line"></div>
    </form>
  </section>
  <!-- 房源信息 -->
  <section>
    <h3 class="color-999">房源信息</h3>
    <div class="row mb-10 hl-34">
      <div class="col-xs-1 pr-0" style="width:92px;"><span class="required">*</span>合同类型：</div>
      <div class="col-xs-10 js-rent-method">
        <span
          :class="{'hl-radio': 1, 'active': item.type == contactType.active, 'mr-10': 1}"
          @click="setContactType(item.type)"
          v-for="item in contactType.list"
        >{{item.name}}</span>
      </div>
    </div>
    <div class="row mb-10 hl-34">
      <div class="col-xs-1 pr-0" style="width:92px;"><span class="required">*</span>签约项目：</div>
      <div>
        <div class="select-ul" id="pro-st" style="margin-left:15px;">
          <!-- {{projects.selectedProjectName}} -->
          <span class="select-name br-4 box-i-shadow">{{projects.selectedProjectName}}</span>
          <ul>
            <li
              v-for="(item, index) in projects.list"
              @click="getProjectMes(item.projectId, item.projectName, item.contractNoPrefix, item.contractNamePrefix)"
            >{{item.projectName}}</li>
          </ul>
        </div>
      </div>
      <button class="btn n-btn-primary add-cw-btn" v-if="contactType.active == 'ER'" @click="getBuildings(1)">
        <span class="icon-Org-account mr-10"></span>添加单元
      </button>
      <button class="btn n-btn-primary add-gw-btn" v-if="contactType.active == 'WR'" @click="getBuildings(2)">
        <span class="icon-Org-account mr-10"></span>添加工位
      </button>
      <button class="btn n-btn-primary add-cw-btn" @click="getBuildings(3)">
        <span class="icon-Org-account mr-10"></span>添加车位
      </button>
    </div>
    <!-- 签约单元 -->
    <div v-if="projectInfo.unitFlag && contactType.active == 'ER' && unitData.length">
      <div class="title">签约单元({{unitData.length}})</div>
      <ul class="unit-container border">
        <li class="dy-flex title border-b gradient-color">
          <div class="dy-fx-5">楼宇</div>
          <div class="dy-fx-2">楼层</div>
          <div class="dy-fx-2">单元</div>
          <div class="dy-fx-3">面积(m²)</div>
          <div class="dy-fx-2">操作</div>
        </li>
        <li
          class="dy-flex content-item"
          v-for="(item, index) in unitData"
        >
          <div class="dy-fx-5">{{item.building_name}}</div>
          <div class="dy-fx-2">{{item.floor_name || '--'}}</div>
          <div class="dy-fx-2">{{item.unit_name}}</div>
          <div class="dy-fx-3">
            <input type="text"
              class="w-max"
              v-model="item.unit_acreage"
            />
          </div>
          <div class="dy-fx-2">
            <span class="icon-Gm-delete-2 color-999" @click="deleteUnit(index)"></span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 签约工位 -->
    <div v-if="contactType.active == 'WR' && projectInfo.wpFlag && wpData.length">
      <div class="title">签约工位({{wpNum}})</div>
      <ul class="position-container border">
        <li class="dy-flex title border-b gradient-color">
          <div class="dy-fx-4">楼宇</div>
          <div class="dy-fx-1">楼层</div>
          <div class="dy-fx-1">单元</div>
          <div class="dy-fx-1">工位数</div>
          <div class="position-item">工位清单</div>
        </li>
        <li class="dy-flex content-item" v-for="(item, index) in wpData">
          <div class="dy-fx-4">{{item.building_name}}</div>
          <div class="dy-fx-1">{{item.floor_name || '--'}}</div>
          <div class="dy-fx-1">{{item.unit_name}}</div>
          <div class="dy-fx-1">{{item.stop ? item.stop.length : '0'}}</div>
          <div class="position-item">
            <span class="position">
              <span v-for="(list, now) in item.stop" @click="deleteWp(index, now)">
                {{list.positionName}}
                <i class="icon-Gm-delete-2"></i>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 签约车位 -->
    <div v-if="projectInfo.stFlag && stData.length">
      <div class="title">签约车位({{stNum}})</div>
      <ul class="position-container border">
        <li class="dy-flex title border-b gradient-color">
          <div class="dy-fx-4">楼宇</div>
          <div class="dy-fx-1">楼层</div>
          <div class="dy-fx-1">单元</div>
          <div class="dy-fx-1">车位数</div>
          <div class="position-item">车位清单</div>
        </li>
        <li class="dy-flex content-item" v-for="(item, index) in stData">
          <div class="dy-fx-4">{{item.building_name}}</div>
          <div class="dy-fx-1">{{item.floor_name || '--'}}</div>
          <div class="dy-fx-1">{{item.unit_name}}</div>
          <div class="dy-fx-1">
            {{item.stop ? item.stop.length : '0'}}
          </div>
          <div class="position-item">
            <span class="position">
              <span v-for="(list, now) in item.stop" @click="deleteSt(index, now)">
                {{list.positionName}}
                <i class="icon-Gm-delete-2"></i>
              </span>
            </span>
          </div>
        </li>
      </ul>
    </div>
    <div class="sperate-line"></div>
  </section>
<!-- #/contractNew2 -->
  <div class="ptb-10">
    <a href="javascript:;" class="btn n-btn-primary next-step-btn js-next-step mr-16" type="submit" @click="nextData">下一步</a>
    <button class="btn n-btn-outline js-cel" type="button">取消</button>
  </div>

  <!-- 添加车位弹出层 -->
  <section class="pop" v-if="bounced.stFlag">
    <div class="head-pop font-16"><span class="title">添加车位</span>
      <button class="fw-close absolute" @click="closeStPop">×</button>
    </div>
    <div class="content border-b">
      <!-- 选择容器 -->
      <div class="clearfix select-row">
        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mr-10"><span class="required">*</span>楼宇:</div>
          <div class="pull-left building-select">
            <div class="select-ul st-name">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li v-for="item in projects.buildingData" @click="getBuildId(item.buildingId, item.names)">{{item.names}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mlr-10"><span class="required">*</span>楼层：</div>
          <div class="pull-left floor-select">
            <div class="select-ul">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li
                  v-for="(item, index) in projects.floorsdata"
                  @click="getStWpUnit(item.floorId, item.floor, item.floorName)"
                >{{item.floorName || '--'}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mlr-10"><span class="required">*</span>单元：</div>
          <div class="pull-left unit-select">
            <div class="select-ul">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li
                  v-for="(item, index) in projects.unitdata"
                  v-if="item.unitType == 'ST'"
                  @click="getswDt(item.unitId, item.unitName)"
                >{{item.unitName}}</li>
              </ul>
            </div>
          </div>
        </div>
        <button class="btn n-btn-default ml-10">查询</button>
      </div>
      <!-- 内容 -->
      <div class="clearfix table">
        <div class="tb-title clearfix">
          <div class="position">车位</div>
        </div>
        <ul class="tb-content">
          <li class="tb-item clearfix">
            <div class="position st-unit st-list">
              <span v-for="(item, index) in projects.stWpdata"
              :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
               @click="selUnitSt($event, index, item.positionId, item.positionName)">
                {{item.positionName | ellipsis}}
                <i class="icon-Nav-contract-choice selected-icon"></i>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="button-container">
      <button class="btn n-btn-primary" @click="confirmAddUnitStWp(3)">确认添加</button>
    </div>
  </section>
  <!-- 添加工位弹出层 -->
  <section class="pop" v-if="contactType.active == 'WR' && bounced.wpFlag">
    <div class="head-pop font-16"><span class="title">添加工位</span>
      <button class="fw-close absolute" @click="closeWpPop">×</button>
    </div>
    <div class="content border-b">
      <!-- 选择容器 -->
      <div class="clearfix select-row">
        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mr-10"><span class="required">*</span>楼宇：</div>
          <div class="pull-left building-select">
            <div class="select-ul">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li v-for="item in projects.buildingData" @click="getBuildId(item.buildingId, item.names)">{{item.names}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mlr-10"><span class="required">*</span>楼层：</div>
          <div class="pull-left floor-select">
            <div class="select-ul">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li
                  v-for="(item, index) in projects.floorsdata"
                  @click="getStWpUnit(item.floorId, item.floor, item.floorName)"
                >{{item.floorName || '--'}}</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mlr-10"><span class="required">*</span>单元：</div>
          <div class="pull-left unit-select">
            <div class="select-ul">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li
                  v-for="(item, index) in projects.unitdata"
                  v-if="item.unitType == 'WP'"
                  @click="getswDt(item.unitId, item.unitName)"
                >{{item.unitName}}</li>
              </ul>
            </div>
          </div>
        </div>
        <button class="btn n-btn-default ml-10">查询</button>
      </div>
      <!-- 内容 -->
      <div class="clearfix table">
        <div class="tb-title clearfix">
          <div class="position">工位</div>
        </div>
        <ul class="tb-content">
          <li class="tb-item clearfix">
            <div class="position st-unit wp-list">
              <span v-for="(item, index) in projects.stWpdata"
              :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
               @click.prevent="selUnitWp($event, index, item.positionId, item.positionName)">
                {{item.positionName | ellipsis}}
                <i class="icon-Nav-contract-choice selected-icon"></i>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="button-container">
      <button class="btn n-btn-primary" @click="confirmAddUnitStWp(2)">确认添加</button>
    </div>
  </section>
  <!-- 添加单元弹出层 -->
  <section class="pop" v-if="bounced.unitFlag && contactType.active == 'ER'">
    <div class="head-pop font-16"><span class="title">添加单元</span>
      <button class="fw-close absolute" @click="closeUnitPop">×</button>
    </div>
    <div class="content border-b">
      <!-- 选择容器 -->
      <div class="clearfix select-row">
        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mr-10"><span class="required">*</span>选择楼宇：</div>
          <div class="pull-left building-select unit-name">
            <div class="select-ul">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li v-for="item in projects.buildingData" @click="getBuildId(item.buildingId, item.names)">{{item.names}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pull-left clearfix">
          <div class="pull-left hl-34 mlr-10"><span class="required">*</span>选择楼层：</div>
          <div class="pull-left floor-select">
            <div class="select-ul">
              <span class="select-name br-4 box-i-shadow">请选择</span>
              <ul>
                <li
                  v-for="(item, index) in projects.floorsdata"
                  @click="getUnit(item.floorId, item.floorName)"
                >{{item.floorName || '--'}}</li>
              </ul>
            </div>
          </div>
        </div>
        <button class="btn n-btn-default ml-10" @click="queryUnit">查询</button>
      </div>
      <!-- 内容 -->
      <div class="clearfix table">
        <div class="tb-title clearfix">
          <div class="last-unit">单元</div>
        </div>
        <ul class="tb-content">
          <li class="tb-item clearfix" v-if="projects.unitdata.length > 0">
            <div class="last-unit">
              <span
                :class="{yz_status:item.rentState === 'IR',yd_status:item.rentState === 'YD',ip_status:item.rentState === 'IP',du_status:item.rentState === 'DU',zy_status:item.rentState === 'ZY',kz_status:item.rentState === 'VA'}"
                v-for="(item, index) in projects.unitdata"
                @click="selUnit($event, index, item.unitId)"
                :data-unitId="item.unitId"
              >
                {{item.unitName | ellipsis}}
                <i class="icon-Nav-contract-choice selected-icon"></i>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="button-container">
      <button class="btn n-btn-primary" @click="confirmAddUnitStWp(1)">确认添加</button>
    </div>
  </section>

  <div class="backdrop" v-if="bounced.unitFlag"></div>
  <div class="backdrop" v-if="bounced.stFlag"></div>
  <div class="backdrop" v-if="bounced.wpFlag"></div>
</section>

<script src="scripts/app/channel-name.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_edit1.js" charset="utf-8"></script>
